<template>
	<view style="background-color: #F5F5F5;height: 100vh;" v-if="!vering">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
			      <navigator open-type="navigateBack" style="padding:10rpx">
			        <image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
			      </navigator>
			      <text>房产绑定</text>
			      <!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			  </view>
		</view>
		<view class="box topnext">
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						选择房产
					</view>
					<picker 
					mode="multiSelector" 
					:range="list" 
					range-key="title" 
					:value="value"
					@columnchange="changecolum"
					@change="setroom">
						<view class="uni-input">{{formatvalue}}</view>
					</picker>
					<image class="box1-1img" src="https://x.bilinmeiju.com/static/my/yjt.png" mode=""></image>
				</view>
			</view>
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						您的身份
					</view>
					<picker mode="selector" range-key="title" :range="shenfenlist" :value="shenfen" @change="setshenfen">
						<view class="uni-input">{{formatshenfen}}</view>
					</picker>
					<image class="box1-1img" src="https://x.bilinmeiju.com/static/my/yjt.png" mode=""></image>
				</view>
			</view>
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						姓名
					</view>
					<input class="uni-input" type="text" v-model="name" placeholder="点击输入真实姓名">
				</view>
			</view>
			<view class="box11">
				<view class="box1-1">
					<view class="box1-1text">
						房产证照片
					</view>
					<view class="uni-bg" @click="chooseimg('housepic')">
						<image class="xiangji" :src="housepic" mode=""></image>
					</view>

				</view>
			</view>
			<view class="box11">
				<view class="box1-1">
					<view class="box1-1text">
						身份证照片
					</view>
					<view class="uni-bg">
						<view class="txh" @click="chooseimg('sfz_a')">
							<image class="xiangji" :src="sfz_a" mode=""></image>
							<view class="xtext">
								人像面
							</view>
						</view>
						<view class="txh" @click="chooseimg('sfz_b')">
							<image class="xiangji" :src="sfz_b" mode=""></image>
							<view class="xtext">
								国徽面
							</view>
						</view>
					</view>

				</view>
			</view>
			<!-- <view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						是否公开
					</view>
					<view class="uni-inputss">
						<image class="uni-bg-reddui" src="../../static/myfangchan/dui.png" mode=""></image>
						<view class="">
							是
						</view>
					</view>
				</view>
			</view> -->



		</view>
		<view class="textcc">
			请上传真实的房产证照和身份证照并等待物业人员核实
		</view>
		<view class="bottom" @click="add()">
			提交
		</view>

	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				CustomBar: 0,
				topheight: 0,
				list:[],
				datas:{},
				value:[],
				formatvalue:'请选择您的房产',
				buildingId:'',//ok
				unitId:'',//ok
				roomId:'',//ok
				shenfenlist:[
					{title:'业主',value:1},
					{title:'租客',value:2},
					{title:'家属',value:3}
				],
				shenfen:0,
				formatshenfen:'业主',
				shenfenval:1,//ok
				housepic:'https://x.bilinmeiju.com/static/myfangchan/xiangji.png',
				sfz_a:'https://x.bilinmeiju.com/static/myfangchan/xiangji.png',
				sfz_b:'https://x.bilinmeiju.com/static/myfangchan/xiangji.png',
				uploadurl:'',
				bartop:0,
				name:'',
				vering:1
			}
		},
		onLoad() {
			that = this;
			var vering = uni.getStorageSync('vering');
			if(vering || vering===0) this.vering = vering;
			this.uploadurl = uni.getStorageSync('uploadurl')
			if(!this.uploadurl){
				that.$post('api/getuploadurl',{}).then(res=>{
					that.uploadurl = res.data.url;
				})
			}
			this.bartop = this.$bartop
			this.$post('center/getmyphone',{}).then(res=>{
				this.list = res.data.list;
				this.value = [0,0,0]
			})
		},
		methods: {
			add(){
				console.log(11)
				var datas = [this.roomId,this.name,this.shenfenval,this.housepic,this.sfz_a,this.sfz_b];
				console.log(22)
				var show = ['选择房产','输入姓名','选择身份','上传房产证照片','上传身份证照片','上传身份证照片'];
				for(var i=0; i<datas.length; i++){
					if(!datas[i]){
						uni.showToast({
							title:'请'+show[i],
							icon:'error'
						})
						return false;
					}
				}
				if(this.housepic.indexOf('xiangji.png')>-1){
					uni.showToast({
						title:'请上传房产证',
						icon:'error'
					})
					return false;
				}
				if(this.sfz_a.indexOf('xiangji.png')>-1){
					uni.showToast({
						title:'请上传身份证',
						icon:'error'
					})
					return false;
				}
				if(this.sfz_b.indexOf('xiangji.png')>-1){
					uni.showToast({
						title:'请上传身份证',
						icon:'error'
					})
					return false;
				}
				that.$post('center/bindroom',{roomId:that.roomId,name:that.name,shenfen:that.shenfenval,housepic:that.housepic,sfz_a:that.sfz_a,sfz_b:that.sfz_b,type:3}).then(res=>{
					if(res.code===0){
						uni.showModal({
							title:'绑定提示',
							content:res.msg,
							showCancel:false,
							success() {
								uni.navigateBack({
									delta:2,
									success() {
										
									},
									fail(e) {
										console.log(e)
									}
								})
							}
						})
					}
				})
			},
			chooseimg(name){
				var uploadurl = this.uploadurl
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择
					success: function (res) {
						const imgPath = res.tempFilePaths[0]
						uni.uploadFile({
							url: that.uploadurl,
							filePath: imgPath,
							name: "file",
							success(res) {
								let data = JSON.parse(res.data)
								var imgpath = data.data.url
								that[name] = imgpath;
 							},
							fail(err){
								wx.showModal({
									title:'错误提示',
									content:JSON.stringify(err)
								})
							},
							complete(e){
								// wx.showModal({
								// 	title:'错误提示',
								// 	content:JSON.stringify(e)
								// })
							}
						})
					}
				
				})
			},
			setshenfen(e){
				var index = e.detail.value*1;
				var shenfenlist = this.shenfenlist;
				this.formatshenfen = shenfenlist[index].title;
				this.shenfenval = shenfenlist[index].value;
			},
			changecolum(e){
				var column = e.detail.column;
				var index = e.detail.value;
				if(column==0){
					//获取吧
					var buildingId = this.list[column][index]['buildingId'];
					this.getlist2(buildingId);
					this.value = [index,0,0]
				}
				if(column==1){
					var unitId = this.list[column][index]['unitId'];
					this.getlist3(unitId);
					this.value[1] = index;
					this.value[2] = 0;
				}
				this.$forceUpdate();
			},
			getlist2(buildingId){
				this.$post('center/getdanyuan',{buildingId:buildingId}).then(res=>{
					if(res.data.list){
						this.list[1] = res.data.list;
						this.getlist3(res.data.list[0]['unitId']);
					}else{
						this.list[1] = [];
					}
				this.$forceUpdate();	
				})
			},
			getlist3(unitId){
				this.$post('center/gethushi',{unitId:unitId}).then(res=>{
					if(res.data.list){
						this.list[2] = res.data.list;
					}else{
						this.list[2] = [];
					}
					this.$forceUpdate();
				})
			},
			setroom(e){
				console.log(e);
				this.value = e.detail.value;
				var value = this.value;
				var list = this.list;
				var str = list[0][value[0]].title+'/';
					str+= list[1][value[1]].title+'/';
					str += list[2][value[2]].title;
				this.formatvalue = str;
				// buildingId:'',
				// unitId:'',
				// roomId:''
				this.buildingId = list[0][value[0]].buildingId;
				this.unitId = list[1][value[1]].unitId;
				this.roomId = list[2][value[2]].roomId;
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.beijing {
		width: 100vw;
		height: 174rpx;
		z-index: 1;
		position: absolute;
		top: 0;
	}

	.top {
		z-index: 5;
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.toptext {
		z-index: 5;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 36rpx;
	}

	.top1img {
		z-index: 5;
		width: 20rpx;
		height: 36rpx;
	}

	.box {
		width: 700rpx;
		background-color: #ffffff;
		margin: 0 auto;
	}

	.box1 {
		width: 650rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin: 0rpx auto;
	}

	.box11 {
		width: 650rpx;
		height: 150rpx;
		display: flex;
		margin: 0rpx auto;
	}

	.uni-input {
		width: 500rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.uni-inputss {
		display: flex;
		align-items: center;
	}

	.uni-bg {
		display: flex;
	}

	.uni-bg-reddui {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.uni-inputcc {
		width: 300rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.box1-1 {
		/* margin-top: 20rpx; */
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
	}

	.box1-1text {
		width: 150rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
	}

	.box1-1img {
		width: 10rpx;
		height: 20rpx;
	}

	.yzm {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FE7B00;
	}

	.textcc {
		margin-left: 50rpx;
		margin-top: 10rpx;
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.bottom {
		margin-top: 30rpx;
		font-size: 40rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		width: 700rpx;
		height: 100rpx;
		margin-left: 25rpx;
		background-color: rgb(255, 174, 69);
		border-radius: 50rpx;
	}

	.xiangji {
		width: 170rpx;
		height: 117rpx;
		margin-left: 20rpx;
	}

	.xtext {
		font-size: 14rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.txh {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
